<template>
  <el-container>
    <!-- 侧边栏 -->
    <el-aside :width="aaa ? '64px' : '200px'" class="Aside">
      <Menu :router="menus" @is-collapse="isCollapse" :aaa="aaa"></Menu>
    </el-aside>
    <el-container class="right">
      <el-header class="Header">
        <LevelHeader @operation="operation"></LevelHeader>
      </el-header>
      <el-main class="Main">
        <DefaultLayout></DefaultLayout>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import Menu from "../components/Menu.vue";
import LevelHeader from "../components/LevelHeader.vue";
import router from "@/router";
import { ref } from "vue";
import DefaultLayout from "../components/defaultLayout.vue";
let aaa = ref();
let isCollapse = (val) => {
  aaa.value = val;
};

let menus = ref([]);
menus.value = router.options.routes.filter((route) => route.path == "/admin")[0].children;

const operation = (val) => {
  aaa.value = val;
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
    display: none;
}

.Aside {
  box-shadow: 10px 0 8px -2px rgba(0, 0, 0, 0.2);
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  height: 100vh; /* 使用固定像素值或你需要的任何其他单位 */
  overflow-y: auto; /* 允许垂直滚动 */
  // overflow-x: hidden; /* 禁止水平滚动，如果需要的话 */

}
.right {
  .Header {
    padding: 0 !important// 清除默认样式;
  }
  .Main {
    height: 80vh;
    overflow: auto;
  }
}
</style>
